{% extends "base.html" %}
{% block title %} Flying on Wheel {% endblock %}
{% block head_block %}
<!-- JS Date Control -->
<script language="javascript" src="/static/jquery-1.4.2.min.js" ></script>
<script language="javascript" src="/static/jquery.date_input.js" ></script>
<link rel="stylesheet" href="/static/date_input.css" type="text/css">
<style type="text/css">
    fieldset.search {
        border: none;
        width: 330px;
        margin: 0 auto;
    }
    .search input, .search button {
        border: none;
        float: left;
    }
    .search input {
        color: #fff;
        font-size: 1.5em;
        width: 143px;
        height: 26px;
        padding: 0px 0px 0;
        background: url(/static/search_bg.gif);
        margin-right: 5px;
    }
    .search button.btn {
        width: 28px;
        height: 26px;
        cursor: pointer;
        text-indent: -9999px;
        background: url(/static/btn.gif);   
    }
</style>
<!-- Google Map Control -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
    function detectBrowser() {
        var useragent = navigator.userAgent;
        //alert(useragent);
        var mapdiv = document.getElementById("map_canvas");
        //alert(useragent.indexOf('Mozilla'));
        if (useragent.indexOf('Mozilla') != -1 || useragent.indexOf('Android') != -1 ) {
            //alert("computer");
            mapdiv.style.width = '850px';
            mapdiv.style.height = '478px';
        } else {
            //alert("mobile");
            mapdiv.style.width = '640px';
            mapdiv.style.height = '360px';
        }
    }
</script>
<script type="text/javascript">
    var map;
    var pathCoordinates = [];
    var poly;
    var directionDisplay;
    var directionsService = new google.maps.DirectionsService();
    
    var image = new google.maps.MarkerImage('/static/mark.png',
        new google.maps.Size(60, 60),
        new google.maps.Point(0,0),
        new google.maps.Point(3, 33));
    var shadow = new google.maps.MarkerImage('/static/mark_shadow.png',
        new google.maps.Size(60, 60),
        new google.maps.Point(0,0),
        new google.maps.Point(3, 33));
    
    function initialize() {
        directionsDisplay = new google.maps.DirectionsRenderer();
        var myLatLng = new google.maps.LatLng(34.506445,109.517914);
        var myOptions = {
            zoom: 4,
            center: myLatLng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        //pathCoordinates = new google.maps.MVCArray();
        var polyOptions = {
            path: pathCoordinates,
            strokeColor: "#FF0000",
            strokeOpacity: 0.5,
            strokeWeight: 1
        }
        poly = new google.maps.Polyline(polyOptions);
        //poly.setMap(map);//for draw straight line...
        directionsDisplay.setMap(map);
        detectBrowser();
        var waypoints = [];
        {% for mp in markedpoints %}
            addLatLng("{{ mp.name }}", "{{ mp.point_info }}", "{{ mp.date }}", "{{ mp.id }}", {{ mp.point }});
            waypoints.push("{{ mp.point }}");
        {% endfor %}
        calcRoute(waypoints);
    }
    function addLatLng(name, point_info, date, id, lat, lng) {
        var latLng = new google.maps.LatLng(lat, lng);
        var path = poly.getPath();
        path.insertAt(pathCoordinates.length, latLng);
        var marker = new google.maps.Marker({
            position: latLng,
            map: map,
            title: name,
            icon: image,
            shadow: shadow
        });
        google.maps.event.addListener(marker, 'click', function() {
            info(map, marker, name, point_info, date, id);
        });
    }
    function info(map, marker, name, point_info, date, id) {
        var contentString = '<div id="content"><div style="float:left;width:50%;" align="right"><img src="/image/'+id+'/"/></div><div style="float:right;width:38%" align="left"><td>'+name+'</td><br/><br/><td>'+point_info+'</td><br/><br/><td>'+date+'</td></div></div>';
        var infowindow = new google.maps.InfoWindow({
            content: contentString
        });
        infowindow.open(map, marker);
    }
    function calcRoute(points) {
        var start = points[0];
        var end = points[points.length-1];
        var waypts = [];
        for (var i = 1; i < points.length-1; i++) {
            waypts.push({
                location: points[i],
                stopover: true});
        }
        var request = {
            origin: start, 
            destination: end,
            waypoints: waypts,
            optimizeWaypoints: true,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        };
        directionsService.route(request, function(response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
            }
        });
    }
</script>
{% endblock %}
{% block body_block %}
    style="margin:0px; padding:0px;" onload="initialize()"
{% endblock %}
{% block init_js_block %}
<script type="text/javascript">
    $($.date_input.initialize);
    $.extend(DateInput.DEFAULT_OPTS, {
        stringToDate: function(string) {
            var matches;
            if (matches = string.match(/^(\d{4,4})-(\d{2,2})-(\d{2,2})$/)) {
                return new Date(matches[1], matches[2] - 1, matches[3]);
            } else {
                return null;
            };
        },
        dateToString: function(date) {
            var month = (date.getMonth() + 1).toString();
            var dom = date.getDate().toString();
            if (month.length == 1) month = "0" + month;
                if (dom.length == 1) dom = "0" + dom;
                    return date.getFullYear() + "-" + month + "-" + dom;
        }
    });            
</script>
{% endblock %}
{% block date_select %}
<div>
    <form action="/">
        <fieldset class="search">
            <input readonly type="text" name="startdate" id="startdate" class="date_input" value="{{ startdate }}"/>
            <input readonly type="text" name="enddate" id="enddate" class="date_input" value="{{ enddate }}"/>
            <button class="btn" title="Submit Show">SHOW</button>
        </fieldset>
    </form>
</div>
{% endblock %}
{% block btn_block %}
<p id="controls">
    <span id="prevBtn">
        <a href="/?startdate={{ startdate }}&enddate={{ enddate }}"></a>
    </span>
    <span id="nextBtn">
        <a href="/?startdate={{ startdate }}&enddate={{ enddate }}"></a>
    </span>
</p>
{% endblock %}
{% block flyer_info %}
<div id="map_canvas" style="width: 850px; height: 478px;"></div>
{% endblock %}
